<template>
  <div class=""  @mousewheel="doSomething">
    <div class="top">  <img
      :src=imgUrl
    >
    <span>上次更新时间：{{time|time}}</span>
    </div>

  <MusicList v-for="(item,index) in musicList" :key="item.id" :item="item" :index="index" @play="$emit('play',$event)">{{index+1}}</MusicList>

   <div
      v-show="List.length"
      class="la"
    >下滑加载更多
      <img
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3275824058,2562348537&fm=26&gp=0.jpg"
        alt=""
      >
    </div>
  </div>
</template>
<script>
import MusicList from '@/components/MusicList'

export default {
  
  data() {
    return {
      allData: Object,
      imgUrl:"",
      time:Number,
      musicList:[],
       clientHeight: 0, //可视区的高度
      scrollTop: 0, //滚动条滚动时，距离顶部的距离
      scrollHeight: 0, //滚动条的总高度,
      // alldata: [],
      List:[]
    };
  },
  components:{
MusicList
  },
  props: ["id"],
  created() {
    this.axios.get(`/playlist/detail?id=${this.id}`).then((d) => {
      this.allData = d.data;

      // this.alldata = d.data.playlist.tracks;

      this.imgUrl=d.data.playlist.coverImgUrl;
      this.time= d.data.playlist.updateTime;
      this.musicList=d.data.privileges

      this.List = d.data.playlist.tracks.map((dd) => {
        let data = dd;

        data.song = {
          album: {
            name:dd.al.name,
            artists:dd.ar
          },
          
        };

        return data;
      });
      this.musicList=this.List.splice(0,10)
    });
  },
  methods:{
    fun(){
      
    },
 doSomething() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //可视区的高度
      this.clientHeight =
      this.scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条的总高度
      if (this.scrollTop + this.clientHeight >= this.scrollHeight ) {
       
        if (this.List.length!= 0) {

    
      // console.log(this.List.splice(10, 5))
          this.musicList.push(this.List.splice(0, 1)[0]);
          // console.log(this.musicList)
          // console.log(this.List)
        }
      
      }
    },
  },
    filters:{
    time(val){
      return (new Date(val).getFullYear()+'-'+new Date(val).getMonth()+'-'+new Date(val).getDate())
    }
  }
};
</script>
<style lang="less" scoped>
div {
  margin-bottom: 20px;
  .top {
    position: relative;
    box-shadow: 14px -13px 14px 20px #583131;

    img {
      width: 100%;
      height: 200px;
      background-size: cover;
      margin-bottom: 15px;
    }
    span{
      position: absolute;
      left: 5%;
      bottom: 5%;
      color: white;
    }
  }
  .la{
        text-align: center;
        height: 5vh;
    img {
      // left: 50%;
      // margin-top: 10px;
      width: 40px;
      height: 30px;
     margin-left: 50%;
      animation: next 1s 0s  linear infinite alternate;
    }
  }
    @keyframes next {
    from{
      transform:translate(-50%,0px)
    }
    to{
transform:translate(-50%,10px)
    }
  }
}
</style>